<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>index</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
    <style>
      .dage {
        background-color: #ddd;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
      }
      .xuexiao {
        background-color: skyblue;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
      }
    </style>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo"></div>

    <script type="text/javascript">
      // 1.VueComponent哪来的？ —————— 调用Vue.extend()出来的
      // 2.所谓的：Person组件、School组件、App组件本质，都是：名为VueComponent的构造函数
      // 3.我们只要编写组件标签<School/>，底层在帮我们new School()
      
      // 创建Hello组件
      let Hello = Vue.extend({
        name:'Hello',
        template:'<h2>你好</h2>'
      })

      // 创建School组件
      let School = Vue.extend({
        name:'School',
        template:`
          <div class="xuexiao">
            <Hello/>
            <Hello/>
            <h2>校名：{{schoolName}}</h2>
            <h2>地址：{{schoolAddress}}</h2>
            <button @click="showInfo">点我查看学校信息</button>
          </div>
        `,
        components:{Hello},
        data(){
          return {
            schoolName:'尚硅谷',
            schoolAddress:'宏福科技园'
          }
        },
        methods:{
          showInfo(){
            // alert(`${this.schoolName}坐落于${this.schoolAddress}`)
            console.log(this)
          }
        }
      })

      new Vue({
        el:'#demo',
        template:`
          <div class="dage">
            <h2>我是大哥（vm）</h2>
            <h3>电话：{{phone}}</h3>  
            <button @click="showPhone">查看电话</button>
            <hr>
            <School/>
          </div>
        `,
        components:{School},
        data(){
          return {
            phone:'1399999999'
          }
        },
        methods:{
          showPhone(){
            alert(this.phone)
            // console.log(this)
          }
        }
      })

    </script>
  </body>
</html>